<template>
  <div class="particulars">
	<div class="banner">
		<mt-swipe :show-indicators="false" :auto="5000">
		  	<mt-swipe-item>
				<img :src="imgs" alt="">
		  	</mt-swipe-item>
		</mt-swipe>
		<router-link :to="{name:url}">
		<i class="el-icon-arrow-left left" @click="fan"></i>
		</router-link>
	</div>
	<div class="con">
		<h2>{{title}}</h2>
		<p>￥{{price}}.00起</p>
		<div>
			<span>普通民居</span>
			<span>70平方米</span>
			<span>宜住5人，最多5人 3张床</span>
		</div>
		<div class="ping">
			<span class="fen">5.0分</span>
			<span>0人评价</span>
		</div>
	</div>

   <div class="foot">
		<button class="btn" @click="changeDd">立即预定</button>
   </div>
<!-- 填写订单 -->
   <div class="dingdan">
		<div class="ddheader">
			<i class="el-icon-arrow-left elleft" @click="changePa"></i>
			<h3>填写订单</h3>
		</div>
		<div class="ddmain">
			<h2>{{title}}</h2>
			<dl>
				<dt><img :src="imgs" alt=""></dt>
				<dd>共<input type="text" class="day" v-model="wan" @input="changewan">晚</dd>
			</dl>
			<div>房间数：<p><button @click="btn1">-</button><span>{{fjs}}</span><button @click="btn2">+</button></p></div>
		</div>
		<div class="foot">
			<p>￥<span>{{priAll}}</span>.00</p>
			<button class="btn" @click="tjdd">提交订单</button>
	   </div>
   </div>

   <div class="ddxqy">
		<div class="ddheader">
		<router-link to="/myIndent">
			<i class="el-icon-arrow-left elleft"></i>
		</router-link>
			<h3>订单详情</h3>
		</div>
		<p>您的订单已完成</p>
   </div>

  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'particulars',
  data () {
    return {
      title:eventBus.value.title,
      price:eventBus.value.price,
      imgs:eventBus.value.coverImg,
      fjs:1,
      priAll:eventBus.value.price,
      wan:1,
      url:'',
      url1:''
    }
  },
  methods:{
  	fan(){
  		if(localStorage.name == '1'){
  			this.url = 'journey'
  		}else if(localStorage.name == '2'){
  			this.url = 'china'
  		}else if(localStorage.name == '3'){
  			this.url = 'foreign'
  		}
  	},
  	changeDd(){
  		$('.dingdan').css('display',"block")
  	},
  	changePa(){
  		$('.dingdan').css('display',"none")
  	},
  	changewan(){
  		if(this.wan >=	 1){
  			this.priAll = this.wan * this.fjs * this.price;
  		} else{
  			this.priAll = 0;
  		}
  	},
  	btn1(){
  		if(this.fjs == 1){
  			this.fjs = 1
  		}else{
  			this.fjs--;
  			this.priAll = this.wan * this.fjs * this.price;
  		}
  	},
  	btn2(){
  		this.fjs++;
  		this.priAll = this.wan * this.fjs * this.price;
  	},
  	tjdd(){
  		if(this.priAll > 0){
  			$('.ddxqy').css('display',"block")
  			this.indentobj = {
  				wan:this.wan,
  				fjs:this.fjs,
  				price:this.price,
  				priAll:this.priAll,
  				img:this.imgs,
  				type:'待确认'
  			}
  			eventBus.indentArr.push(this.indentobj)
  		}
  		
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.particulars{
	width: 100%;
	height: 100%;
	background: #eee;
	position:fixed;
	top:0;
	left: 0;
	z-index: 100;
	.banner{
		width: 100%;
		height: 300px;
		img{
			width: 100%;
		}
		.left{
			color: white;
			position: absolute;
			top:5px;
			left: 5px;
			font-size: 25px;
		}
	}
	.con{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		background: white;
		h2{
			width: 70%;
			float: left;
		}
		p{
			line-height: 70px;
			font-size: 18px;
			color: red;
		}
		div{
			margin-top: 10px;
			.fen{
				color: green;
				margin-right: 10px;
			}
		}
	}

	.foot{
		width: 100%;
		height: 60px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 200;
		background: white;
		p{
			float: left;
			line-height: 60px;
			color: red;	
			margin-left: 20px;
			font-size: 20px;
		}
		.btn{
			float: right;
			width: 45%;
			height: 60px;
			background:#f6b510;
			border:none;
			font-size: 20px;
			color:white;
		}
	}
	.dingdan{
		width: 100%;
		height: 100%;
		background: white;
		position:fixed;
		top:0;
		left: 0;
		z-index: 300;
		display: none;
		.ddheader{
			width: 100%;
			height: 50px;
			border-bottom: 1px solid #eee;
			text-align: center;	
			line-height: 50px;
			.elleft{
				font-size: 20px;
				line-height: 50px;
				margin-left: 20px;
				float: left;
			}
		}
		.ddmain{
			width: 100%;
			h2{
				font-size: 20px;
				font-weight: 500;
				padding: 10px;
				box-sizing: border-box;
			}
			dl{
				width: 100%;
				padding:0 10px;
				box-sizing: border-box;
				position: relative;
				dt{
					width: 35%;
					float: left;
					margin-right: 10px;
					img{
						width: 100%;
					}
				}
				dd{
					line-height: 42px;
					font-size: 20px;
					.day{
						width: 40px;
						color: red;
						text-align: center;
						font-size: 30px;
						border:none;
						border-bottom: 1px solid #666;
						outline: none;
					}
				}
			}
			div{
				font-size: 20px;
				padding: 20px;
				box-sizing: border-box;
				p{
					float: right;
					button{
						width:30px;
						height:30px;
						border:none;
						background: green;
						border-radius: 50%;
						font-size: 20px;
						color: white;
						margin: 0 20px;
					}

				}
			}
		}
	}
}



.ddxqy{
	width: 100%;
	height: 100%;
	background: white;
	position:fixed;
	top:0;
	left: 0;
	z-index: 400;
	display: none;
	.ddheader{
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #eee;
		text-align: center;	
		line-height: 50px;
		.elleft{
			font-size: 20px;
			line-height: 50px;
			margin-left: 20px;
			float: left;
		}
	}
	p{
		width: 130px;
		margin: 50px auto;
	}
}
</style>
